<template>
  <div class="table-container">
    <div class="table-breadcrumb">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>APP首页分类</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <div class="table-content">
      <div class="table-bar">
        <el-button type="primary" style="margin-right: 10px" @click="handleAdd"
          >新增分类</el-button
        >
        卖场：
        <el-select
          v-model="marketId"
          clearable
          @change="selectMarket"
          filterable
          placeholder="请选择卖场"
        >
          <el-option
            v-for="item in marketList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </div>
      <el-table
        empty-text="当前数据空空如也"
        :data="types"
        tooltip-effect="dark"
        style="width: 100%"
        row-key="id"
        border
        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
      >
        <el-table-column prop="id" label="ID" width="200"></el-table-column>
        <el-table-column prop="sort" label="排序" width="100"></el-table-column>
        <el-table-column prop="cover" label="ICON">
          <template slot-scope="scope">
            <el-image
              v-if="scope.row.cover"
              style="width: 100px; height: 100px"
              :src="scope.row.cover"
              :preview-src-list="[scope.row.cover]"
            >
            </el-image>
          </template>
        </el-table-column>
        <el-table-column prop="type_name" label="名称"></el-table-column>
        <el-table-column prop="path" label="路径"></el-table-column>
        <el-table-column prop="market_name" label="所属卖场"></el-table-column>
        <el-table-column label="操作" fixed="right" width="150">
          <template slot-scope="scope">
            <el-button
              size="mini"
              style="margin-right: 5px"
              @click="handleEdit(scope.$index, scope.row)"
              >编辑
            </el-button>
            <el-popconfirm
              confirm-button-text="确定"
              cancel-button-text="点错了"
              icon="el-icon-info"
              icon-color="red"
              title="这是一段内容确定删除吗？"
              @confirm="handleDelete(scope.index, scope.row)"
            >
              <el-button slot="reference" type="danger" size="mini"
                >删除</el-button
              >
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <div class="page-nav">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page"
          :page-sizes="[10, 20, 30, 50, 100]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      page: 1,
      pageSize: 10,
      total: 0,
      keyword: "",
      types: [],
      multipleSelection: [],
      marketId: "", //卖场id
      marketList: [],
    };
  },
  mounted() {
    this.queryList();
    this.remoteMethod();
  },
  methods: {
    // 获取卖场列表
    remoteMethod() {
      this.$http.post("/api/root/Market/marketList").then((res) => {
        console.log(res, "卖场列表");
        if (res.code == 1) {
          this.marketList = res.data ? res.data : [];
        }
      });
    },
    // 选择卖场
    selectMarket() {
      this.page = 1
      this.pageSize =10
      this.queryList();
    },
    handleAdd() {
      this.$router.push({ name: "appCateAdd" });
    },
    handleEdit(index, row) {
      const id = row.id;
      this.$router.push({ name: "appCateEdit", query: { id } });
    },
    handleDelete(index, row) {
      this.toDelete(row.id);
    },
    handleSizeChange(val) {
      this.types = [];
      this.pageSize = val;
      this.queryList();
    },
    handleCurrentChange(val) {
      this.types = [];
      this.page = val;
      this.queryList();
    },
    queryList() {
      this.$http
        .get("/api/root/appCate/index", {
          page: this.page,
          pagesize: this.pageSize,
          keyword: this.keyword,
          market_id:this.marketId
        })
        .then((rest) => {
          if (rest.data) {
            this.types = rest.data.types;
            this.total = rest.data.count;
          }
        });
    },
    toDelete(id) {
      const _ths = this;
      this.$http
        .get("/api/root/appCate/del", {
          id: id,
        })
        .then((rest) => {
          if (rest.msg === "ok") {
            this.$message.success("删除成功");
            setTimeout(function () {
              _ths.queryList();
            }, 600);
          } else {
            this.$message.error(rest.msg);
          }
        });
    },
  },
};
</script>
<style lang="less" scoped>
@import "index.less";
</style>
